<template>
    <div class="box">
        <div class="box-bt">
            <router-link to="home">
                <img src="src/assets/imgs/Snipaste_2022-08-30_09-36-33.png" />
            </router-link>
            <span>限时秒杀</span>
        </div>
        <div class="box-djs">
            <br>
            <p><span class="djs-1">今 日 秒 杀</span></p>
            
            <p><span class="djs-2">每 日 超 值 项 目 限 时 秒 杀 </span></p>
            <p>
                <span class="djs-3">距本场结束</span>
                <van-count-down :time="time">
                    <template #default="timeData">
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </van-count-down>
            </p>
        </div>

        <div class="box-cp">
            <div v-for='item in cparr' :key='item' style="margin-bottom: 10px">
                <van-card
                    origin-price="99.0"
                    :price="item.price"
                    :desc='item.name'
                    title="【皮秒激光】 皮秒嫩肤保湿去..."
                    :thumb="item.img"
                >
                    <template #tags>
                            <div class="cp-jdt"></div>
                            <div class="cp-jdt-1"><span>已售899件</span></div>
                    </template>
                    <template #footer>
                        <van-button >马上抢 > </van-button>
                    </template>    
                </van-card>
            </div>
        </div>
        <van-loading size="24px">加载中...</van-loading>
    </div>

</template>

<script setup lang='ts'>
import { ref,onMounted,reactive } from 'vue';
import axios from 'axios';

    const time = ref(4 * 60 * 60 * 1000);
    let cparr = reactive([])
let pro1=function(){
        axios.get('https://console-mock.apipost.cn/app/mock/project/81780a7d-4762-4605-af3a-0ffc09be0cca/homelimit')
        .then(res=>{
            res.data.data.forEach(item=>{
                cparr.push(item)
            })
            
        })
    }

    onMounted(()=>{
    pro1()
  })

</script>

<style scope>
.box{background: #f3f1ef;}
.box-bt{height: 40px;text-align: center;line-height: 40px;background: white;}
.box-bt img{float: left;vertical-align: middle;}
.box-bt span{margin-right: 70px;}

.box-djs{height: 150px;background: #f18366;text-align: center;}
.djs-1{font-size: 24px;font-weight: bolder; color: white;}
.djs-2{font-size: 12px;color: white;}
.djs-3{font-size: 16px;color: white;float: left;margin-left: 25%;margin-top: 20px;}
.colon { display: inline-block;margin: 0 4px;color: #ee0a24; }
.block {display: inline-block;width: 22px;color: #f78d66;font-size: 12px;
    text-align: center;background-color: #fff; border-radius: 3px; margin-top: 20px;margin-left: 10px;}

.box-cp{width: 90%;margin: 10px auto;}

.van-card{background: white;}
.van-card__content{margin-left: 30px;}
.van-image{width: 125%;height: 125%;}
.van-card__title{font-size: 16px;}
.van-card__desc{font-size: 12px; color: #cccccc;}
.cp-jdt{width: 30%;height: 5px;border-radius: 20px;float: left;margin-top: 8px;
        background: linear-gradient(90deg, #f78d66 50%, white 50%);}
.cp-jdt-1{float: left;color: #cccccc;}
.van-card__price-integer{color: #ff6262;font-weight: bolder;}
.van-card__price-currency{color: #ff6262;}
.van-button{background: #ec7b67; color: white;border-radius: 5px;height: 35px;}

.van-loading{text-align: center;}
</style>